<template>
  <lay-container fluid="true"  class="maincontainer-box"> 
    <div style="display: flex;">
      <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
        <!-- tree -->
        <div v-show="!isFold">
          <lay-button type="normal" size="sm" @click="addRow"
                    v-permission="['/commport/index:auth,/commport/insert']">
            <lay-icon type="layui-icon-addition"></lay-icon>新建
          </lay-button>
          <lay-button type="warm" size="sm" @click="updateRow()"
                      v-permission="['/commport/index:auth,/commport/update']">
            <lay-icon type="layui-icon-edit"  ></lay-icon>修改
          </lay-button>
          <lay-button type="danger" size="sm"  @click="deleteRow()"
                      v-permission="['/commport/index:auth,/commport/update']">
            <lay-icon type="layui-icon-delete">
              </lay-icon>删除
          </lay-button>
        </div>

        <lay-line></lay-line>

        <lay-tree
          v-show="!isFold"
          style="margin-top: 10px"
          :data="dataSource"


          v-model:selectedKey="selectedKey"

          :default-expand-all="true"
          @node-click="handlenodeClick"
        >
          <template #title="{ data }">
            <span :class="selectedKey == data.id ? 'RowSelected' : ''">
              {{ data.title }}
            </span>
          </template>
        </lay-tree>
        <div class="isFold" @click="isFold = !isFold">
          &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
          <lay-icon v-else class="layui-icon-right"></lay-icon>
        </div>
      </div>
      <div style="flex: 1; padding: 10px;  overflow: hidden; "  >
        <lay-tab type="brief" v-model="seltab" class="emptytab"
          @change="showInfo"
        >
          <lay-tab-item title="基本信息" id="jbxx"></lay-tab-item>
          <!-- <lay-tab-item title="设备管理" id="sbgl"></lay-tab-item> -->
        </lay-tab>
        <div  style=" height:calc(100vh - 180px);  overflow-x: hidden;overflow-y: auto;">
          <component :is="componentType" :id="selectedKey"   ></component>
        </div>
      </div>

    </div>

  </lay-container>
</template>
<script lang="ts">
import { ref, reactive ,onMounted,h} from 'vue'
import { layer } from '@layui/layui-vue'
import MyPage from "@/library/MyPage";
import MyHttp from "@/library/MyHttp";
import {MySimpleExport, TableColumn} from "@/library/MySimpleExport";


import MyWin from "@/library/MyWin";

import add from "./add.vue";
import detail from "./detail.vue"; 
import blank from "../htty/blank.vue"
import MyData from '@/library/MyData';




export default {

  components: {  detail,blank },

  setup() {
    const baseUrl="/commcenter";
    const baseQUrl=baseUrl+"/list";
    const pageName="中心处理";

    const myWin=ref<any>(null);
    const seltab=ref("jbxx")
    const isFold=ref(false)

    const listData = ref( )
    const dataSource=ref<any>();
    const query=async (selectid:string) =>{
      let r=await new MyHttp().list(baseQUrl, {},
          {},
          []
      );
      listData.value=r.data;

      let root= {
        id:"0",
        title:"所有"+pageName,
        children:new Array
      }
      r.data.forEach( (o:any,i:number)=>{
          let child={
            id:o.id,
            title:o.name,
          }
          root.children.push(child )
      });
      let dataAll=[root]
      dataSource.value=dataAll;
      if (""==selectid){
        if (r.data.length>0){
          selectedKey.value=r.data[0].id
        }
        if (selectedKey.value==""){
          selectedKey.value="0"
        }
      }else{
        selectedKey.value=selectid
      }
      await showInfo()
    }

    const addRow=async()=>{
      let qm={
        
      }
      let r=await new MyHttp().post(baseUrl+"/insertinit",qm,
        { 
        }
      );
      let opt={
          title: '新增'+pageName,
          content: h( add, 
            {  
             data:r.data, 
             isAdd:true,
             onOk:(data:any)=>{
                query(data.id);
             }       
            }
            ), 
          area: ['500px','500px']
        }; 
        myWin.value.open(opt ); 
    }
    const updateRow=async( )=> {
      let data=MyData.getById(listData.value, selectedKey.value)
      if (!data){
        return
      }

      let qm={
        id:selectedKey.value
      }
      let r=await new MyHttp().post(baseUrl+"/detail",qm,
          {
          }
      );
      let opt={
        title: '修改'+pageName,
        content: h( add,
            {
              data:r.data,
              isAdd:false,
              onOk:(data:any)=>{
                query(data.id);
              }
            }
        ),
        area: ['500px','500px']
      };
      myWin.value.open(opt );
    }
    const deleteRow=async()=>{
      let data=MyData.getById(listData.value, selectedKey.value)
      if (!data){
        return
      }

      let msg=`是否删除 ${pageName}:${data.name} ?`;
      let qm={
        id:data.id
      };
      MyWin.confirm(msg,{
        onOK:async()=>{
          var r= await new MyHttp().post(baseUrl+"/delete",qm,
              {
              }
          );
          query("");
        }
      })
    }




    const selectedKey = ref('')
    const componentType=ref("blank")

   const handlenodeClick=(node: any)=>{
      showInfo()
   }
   const showInfo=async ()=>{
     componentType.value="blank";
     let componentType2=""
     if(  "0"==selectedKey.value||""==selectedKey.value){

     }else{
       switch (seltab.value){
         case "jbxx":
           componentType2="detail"
           break;
         case "sbgl":
           componentType2="device"
           break;
       }
       setTimeout(function (){

         componentType.value=componentType2
       },50)
     }

   }
   onMounted(() =>{
      myWin.value=new MyWin();
      query("")
   });
    return {
      seltab,
      isFold,

      query,
      dataSource,
      selectedKey,
      handlenodeClick,

      addRow,
      updateRow,
      deleteRow,

      componentType,
      showInfo,

    }
  }
}
</script>

<style scoped >

.left-tree {
  display: inline-block;
  padding: 20px 15px 0 5px;
  height: 1200px;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;
}
/* todo layui-tree-entry 设置无效 */
.layui-tree-entry {
  position: relative;
  padding: 10px 0;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
}
.isFold {
  position: absolute;
  top: 36%;
  right: -10px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}

</style>
